<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <!--      <br/>-->
      <el-form-item label="年份" prop="status">
        <el-select
          v-model="queryParams.year"
          placeholder="请选择年份"
          clearable
          style="width: 90px"
          @visible-change="getYears"
        >
          <el-option
            v-for="year in yearList"
            :key="year.id"
            :label="year.name"
            :value="year.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月份">
        <el-select
          style="width: 80px"
          v-model="queryParams.months"
          placeholder="请选择月份"
          clearable
        >
          <el-option
            v-for="month in monthList"
            :key="month.id"
            :label="month.name"
            :value="month.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
    <el-form-item label="产品量纲">
      <el-select v-model="value1" placeholder="请选择单位"  @change="change($event)">
        <el-option
          v-for="item in selectList"
          :key="item.value"
          :label="item.label"
          :value="item.child"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select
        v-model="value2"
        multiple
        style="margin-left: 20px"
        placeholder="请选择"
      >
        <el-option
          v-for="item in value1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
      <!--      <br/>-->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="compute"
          >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <h2 class="h2">项目组销量统计(按产品)</h2>
    <div id="chart" style="width: 100%; height: 50vh" v-if="valueaaa"></div>
    <h2 class="h2">项目组销量统计(按时间)</h2>
    <div class="top">
      <div class="box">
        <div class="box1">年份</div>
        <el-select
          v-model="zxyear"
          placeholder="请选择年份"
          clearable
          style="width: 240px"
          @visible-change="getYears1"
        >
          <el-option
            v-for="year in yearList"
            :key="year.id"
            :label="year.name"
            :value="year.id"
          ></el-option>
        </el-select>
      </div>
      <div class="box">
        <div class="box1">产品量纲</div>

        <el-select v-model="value3" placeholder="请选择单位"   @change="change1($event)">
        <el-option
          v-for="item in selectList1"
          :key="item.value"
          :label="item.label"
          :value="item.child"
        >
        </el-option>
      </el-select>
        <el-select
        v-model="value4"
        multiple
        style="margin-left: 20px"
        placeholder="请选择"
      >
        <el-option
          v-for="item in value3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      </div>
      <div class="box">
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-button type="" @click="resh()">重置</el-button>
      </div>
      <div class="box" style="">
        <div class="box11" :class="isindex == 1 ? 'active' : ''" @click="fenji">
          分计
        </div>
        <div class="box22" :class="isindex == 2 ? 'active' : ''" @click="leiji">
          累计
        </div>
      </div>
    </div>
    <div id="chart1" style="width: 100%; height: 50vh" v-if="valuebbb"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
//  折线图  柱状图 post请求
import { getSalesVolume, getSalesHistogram,getChartData } from "@/api/chart/chart";
import internal from "stream";

export default {
  name: "sales",
  data() {
    return {
      aaa:true,
      valueaaa: true,
      valuebbb:true,
      isindex: 1,
      zxyear: new Date().getFullYear(),
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: []
      },
      selectList: [
        {
          value: "0",
          label: "台/套",
          child: [
            {
              value: "0",
              label: "全选",
            },
            {
              value: "1",
              label: "砂MB值智能采集终端",
            },
            {
              value: "2",
              label: "砂性能一体化智能采集终端",
            },
            {
              value: "3",
              label: "砂饱和面干吸水率智能采集终端",
            },
            {
              value: "4",
              label: "粉料罐自动盘点系统",
            },
            {
              value: "5",
              label: "便捷校秤系统",
            },
            {
              value: "6",
              label: "骨料含水率在线测试系统",
            },
            {
              value: "7",
              label: "其他(i砼)",
            },
          ],
        },
        {
          value: "1",
          label: "吨",
          child: [
            {
              value: "0",
              label: "全选",
            },
            {
              value: "1",
              label: "石膏砂浆",
            },
            {
              value: "2",
              label: "水泥砂浆",
            },
            {
              value: "3",
              label: "聚氨酯",
            },
            {
              value: "4",
              label: "渗透结晶材料",
            },
            {
              value: "5",
              label: "其他(城市更新)",
            },
            {
              value: "6",
              label: "外加剂",
            },
            {
              value: "7",
              label: "混凝土纳米增强材料",
            },
            {
              value: "8",
              label: "砂浆触变剂",
            },
            {
              value: "9",
              label: "无碱液体速凝剂",
            },
            {
              value: "10",
              label: "喷射混凝土降回弹材料",
            },
            {
              value: "11",
              label: "环氧树脂",
            },
            {
              value: "12",
              label: "其他(化学建材)",
            },
            {
              value: "13",
              label: "RPC140",
            },
            {
              value: "14",
              label: "其他(重点项目)",
            },
            {
              value: "15",
              label: "抢修材料",
            },
          ],
        },
        {
          value: "2",
          label: "方",
          child: [
            {
              value: "0",
              label: "全选",
            },
            {
              value: "1",
              label: "风电UHPC",
            },
            {
              value: "2",
              label: "其他(风电)",
            },
            {
              value: "3",
              label: "UC120",
            },
          ],
        },
        {
          value: "3",
          label: "平米",
          child: [
            {
              value: "0",
              label: "全选",
            },
            {
              value: "1",
              label: "石膏板安装",
            },
            {
              value: "2",
              label: "ALC板安装",
            },
            {
              value: "3",
              label: "其他(轻质墙材)",
            },
            {
              value: "4",
              label: "UC-120",
            },
            {
              value: "5",
              label: "STC",
            },
            {
              value: "6",
              label: "UHPC幕墙板",
            },
            {
              value: "7",
              label: "碳纤维布（平米）",
            },
            {
              value: "8",
              label: "其他(UHPC)",
            },
          ],
        },
      ],
      selectList1: [
        {
          value: "0",
          label: "台/套",
          child: [
          {
              value: "0",
              label: "全选"
            },
            {
              value: "1",
              label: "砂MB值智能采集终端",
            },
            {
              value: "2",
              label: "砂性能一体化智能采集终端",
            },
            {
              value: "3",
              label: "砂饱和面干吸水率智能采集终端",
            },
            {
              value: "4",
              label: "粉料罐自动盘点系统",
            },
            {
              value: "5",
              label: "便捷校秤系统",
            },
            {
              value: "6",
              label: "骨料含水率在线测试系统",
            },
            {
              value: "7",
              label: "其他(i砼)",
            },
          ],
        },
        {
          value: "1",
          label: "吨",
          child: [
            {
              value: "0",
              label: "全选"
            },
            {
              value: "1",
              label: "石膏砂浆",
            },
            {
              value: "2",
              label: "水泥砂浆",
            },
            {
              value: "3",
              label: "聚氨酯",
            },
            {
              value: "4",
              label: "渗透结晶材料",
            },
            {
              value: "5",
              label: "其他(城市更新)",
            },
            {
              value: "6",
              label: "外加剂",
            },
            {
              value: "7",
              label: "混凝土纳米增强材料",
            },
            {
              value: "8",
              label: "砂浆触变剂",
            },
            {
              value: "9",
              label: "无碱液体速凝剂",
            },
            {
              value: "10",
              label: "喷射混凝土降回弹材料",
            },
            {
              value: "11",
              label: "环氧树脂",
            },
            {
              value: "12",
              label: "其他(化学建材)",
            },
            {
              value: "13",
              label: "RPC140",
            },
            {
              value: "14",
              label: "其他(重点项目)",
            },
            {
              value: "15",
              label: "抢修材料",
            },
          ],
        },
        {
          value: "2",
          label: "方",
          child: [
            {
              value: "0",
              label: "全选",
            },
            {
              value: "1",
              label: "风电UHPC",
            },
            {
              value: "2",
              label: "其他(风电)",
            },
            {
              value: "3",
              label: "UC120",
            },
          ],
        },
        {
          value: "3",
          label: "平米",
          child: [
            {
              value: "0",
              label: "全选",
            },
            {
              value: "1",
              label: "石膏板安装",
            },
            {
              value: "2",
              label: "ALC板安装",
            },
            {
              value: "3",
              label: "其他(轻质墙材)",
            },
            {
              value: "4",
              label: "UC-120",
            },
            {
              value: "5",
              label: "STC",
            },
            {
              value: "6",
              label: "UHPC幕墙板",
            },
            {
              value: "7",
              label: "碳纤维布（平米）",
            },
            {
              value: "8",
              label: "其他(UHPC)",
            },
          ],
        },
      ],
      value1: '',
      value2: [],

      value3:'',
      value4:[],
      issearch: false,
      // 查询参数
      queryParams: {
        year: undefined,
        months: undefined,
      },
      dateRange: [],
      showSearch: true,
      deptList: [],
      chartDataMap: {
        header: [],
        data: {},
        timeData: [],
      },
      yearList: [],
      chartList: [],
      // 月份选择
      monthList: [
        { id: 1, name: "一月" },
        { id: 2, name: "二月" },
        { id: 3, name: "三月" },
        { id: 4, name: "四月" },
        { id: 5, name: "五月" },
        { id: 6, name: "六月" },
        { id: 7, name: "七月" },
        { id: 8, name: "八月" },
        { id: 9, name: "九月" },
        { id: 10, name: "十月" },
        { id: 11, name: "十一月" },
        { id: 12, name: "十二月" },
      ],
      iTong_product: [],
      Uhpc_product: [],
      chem_product: [],
      city_update: [],
      wind_power: [],
      wall_product: [],
      major_product: [],

      show_product: ["1", "2", "3"],

      iTong_product1: [],
      Uhpc_product1: [],
      chem_product1: [],
      city_update1: [],
      wind_power1: [],
      wall_product1: [],
      major_product1: [],
      is_cz: false,
      droopdownBox1: {
        "台/套": [
          {
            name: "砂MB值智能采集终端",
            type: "line",
            stack: "Total",
            color: "#00A3E0",
            data: this.iTong_product1,
          },
          {
            name: "砂性能一体化智能采集终端",
            type: "line",
            stack: "Total",
            color: "#236275",
            data: this.iTong_product1,
          },
          {
            name: "砂饱和面干吸水率智能采集终端",
            type: "line",
            stack: "Total",
            color: "#bdd9fe",
            data: this.iTong_product1,
          },
          {
            name: "粉料罐自动盘点系统",
            type: "line",
            stack: "Total",
            color: "#9bc8fe",
            data: this.iTong_product1,
          },
          {
            name: "便捷校秤系统",
            type: "line",
            stack: "Total",
            color: "#ee9a38",
            data: this.iTong_product1,
          },
          {
            name: "骨料含水率在线测试系统",
            type: "line",
            stack: "Total",
            color: "#fbffff",
            data: this.iTong_product1,
          },
          {
            name: "其他(i砼)",
            type: "line",
            stack: "Total",
            color: "#0fc7d1",
            data: this.iTong_product1,
          },
        ],
        吨: [
          {
            name: "石膏砂浆",
            type: "line",
            stack: "Total",
            color: "#1cbf76",
            data: this.iTong_product1,
          },
          {
            name: "水泥砂浆",
            type: "line",
            stack: "Total",
            color: "#007c3a",
            data: this.iTong_product1,
          },
          {
            name: "环氧树脂",
            type: "line",
            stack: "Total",
            color: "#8cb53d",
            data: this.iTong_product1,
          },
          {
            name: "聚氨酯",
            type: "line",
            stack: "Total",
            color: "#2679ca",
            data: this.iTong_product1,
          },
          {
            name: "渗透结晶材料",
            type: "line",
            stack: "Total",
            color: "#fbc11b",
            data: this.iTong_product1,
          },
          {
            name: "抢修材料",
            type: "line",
            stack: "Total",
            color: "#3c3c3c",
            data: this.iTong_product1,
          },
          {
            name: "其他(城市更新)",
            type: "line",
            stack: "Total",
            color: "#fa3684",
            data: this.iTong_product1,
          },
          {
            name: "外加剂",
            type: "line",
            stack: "Total",
            color: "#05060a",
            data: this.iTong_product1,
          },
          {
            name: "混凝土纳米增强材料",
            type: "line",
            stack: "Total",
            color: "#f15213",
            data: this.iTong_product1,
          },
          {
            name: "砂浆触变剂",
            type: "line",
            stack: "Total",
            color: "#79ae38",
            data: this.iTong_product1,
          },
          {
            name: "无碱液体速凝剂",
            type: "line",
            stack: "Total",
            color: "#78640c",
            data: this.iTong_product1,
          },
          {
            name: "喷射混凝土降回弹材料",
            type: "line",
            stack: "Total",
            color: "#bc3ce8",
            data: this.iTong_product1,
          },
          {
            name: "其他(化学建材)",
            type: "line",
            stack: "Total",
            color: "#f62c54",
            data: this.iTong_product1,
          },
          {
            name: "RPC140",
            type: "line",
            stack: "Total",
            color: "#129646",
            data: this.iTong_product1,
          },
          {
            name: "其他(重点项目)",
            type: "line",
            stack: "Total",
            color: "#1a8d48",
            data: this.iTong_product1,
          },
        ],
        方: [
          {
            name: "风电UHPC",
            type: "line",
            stack: "Total",
            color: "#f14e0e",
            data: this.iTong_product1,
          },
          {
            name: "其他(风电)",
            type: "line",
            stack: "Total",
            color: "#2f89ef",
            data: this.iTong_product1,
          },
          {
            name: "其他(风电)",
            type: "line",
            stack: "UC120",
            color: "#2f852f",
            data: this.iTong_product1,
          },
        ],
        平米: [
          {
            name: "石膏板安装",
            type: "line",
            stack: "Total",
            color: "#129646",
            data: this.iTong_product1,
          },
          {
            name: "ALC板安装",
            type: "line",
            stack: "Total",
            color: "#fec310",
            data: this.iTong_product1,
          },
          {
            name: "其他(轻质墙材)",
            type: "line",
            stack: "Total",
            color: "#dfc075",
            data: this.iTong_product1,
          },
          {
            name: "UC-120",
            type: "line",
            stack: "Total",
            color: "#dfc075",
            data: this.iTong_product1,
          },
          {
            name: "STC",
            type: "line",
            stack: "Total",
            color: "#dfc075",
            data: this.iTong_product1,
          },
          {
            name: "UHPC幕墙板",
            type: "line",
            stack: "Total",
            color: "#dfc075",
            data: this.iTong_product1,
          },
          {
            name: "其他(UHPC)",
            type: "line",
            stack: "Total",
            color: "#dfc075",
            data: this.iTong_product1,
          },
          {
            name: "碳纤维布（平米）",
            type: "line",
            stack: "Total",
            color: "#df2275",
            data: this.iTong_product1,
          },
        ],
      },
      aaaa: true,
      bbbb: true,
    };
  },
  created() {
    // this.value1 = this.selectList[1].label
    // this.value2 = this.value1[0].label
  },
  watch:{
    isindex() {
      this.search()
    },
    value4(newValue) {
      // console.log(newValue,'new')
      if(newValue.indexOf('0') != '-1' && this.value3[1].label == '石膏砂浆') {
        this.value4 = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']
      }else if(newValue.indexOf('0') != '-1' && this.value3[1].label == '砂MB值智能采集终端') {
        this.value4 = ['1','2','3','4','5','6']
      }else if(newValue.indexOf('0') != '-1' && this.value3[1].label == '风电UHPC') {
        this.value4 = ['1','2','3']
      }else if(newValue.indexOf('0') != '-1' && this.value3[1].label == '石膏板安装') {
        this.value4 = ['1','2','3','4','5','6','7','8']
      }
    },
    value3(newKey) {
      if(this.aaaa){
        this.aaaa = false
      }else {
        this.value4 = []
      }
    },
    value1(newKey) {
      if(this.bbbb){
        this.bbbb = false
      }else {
        this.value2 = []
      }
    },
    value2(newValue) {
      console.log(newValue,'new')
      if(newValue.indexOf('0') != '-1' && this.value1[1].label == '石膏砂浆') {
        this.value2 = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']
      }else if(newValue.indexOf('0') != '-1' && this.value1[1].label == '砂MB值智能采集终端') {
        this.value2 = ['1','2','3','4','5','6','7']
      }else if(newValue.indexOf('0') != '-1' && this.value1[1].label == '风电UHPC') {
        this.value2 = ['1','2','3']
      }else if(newValue.indexOf('0') != '-1' && this.value1[1].label == '石膏板安装') {
        this.value2 = ['1','2','3','4','5','6','7','8']
      }
    }
  },
  methods: {
    leiji() {
      this.isindex = 2
    },
    fenji() {
      this.isindex = 1
    },
    getYears1() {
      const timeOne = new Date();
      const year = timeOne.getFullYear();
      this.yearList = [
        { id: year - 2, name: year - 2 + " 年" },
        { id: year - 1, name: year - 1 + " 年" },
        { id: year, name: year + " 年" },
        { id: year + 1, name: year + 1 + " 年" },
        { id: year + 2, name: year + 2 + " 年" },
      ];
    },
    // 重置
    resh() {
      // this.value1 = ["1", "2", "3"];
      // this.is_cz = true;
      // this.option.series = [];
      // this.getSalesV();
      this.zxyear = '',
      this.value4 = [],
      this.value3 = []
      this.getChart1()
    },
    // 第二个搜索
    search() {
      this.valuebbb = false
      this.option.series = []
      let subtotal1 = [] //分计1
      let total1 = []  //累计
      let productNamesArr1 = []
      this.value4.forEach((item) => {
        productNamesArr1.push(this.value3[item].label)
      })
      let data = {
        year:this.zxyear,
        productNames:productNamesArr1,
      }
      let index = 0
      let colorList1 = ['#ff0000','#000800','#0000ff','#000000','#a52a2a','#ffd700','#808080','#ffa500','#ffff00','#f5deb3','#ffc0cb','#9932cd','#ffa631','#3c3c3c','#fc7119']
      // console.log(data,'data点击搜索')
      getSalesVolume(data).then(res => {
      // this.valuebbb = false
        if(res.code == 200) {
          for(let key in res.data) {
            //分计
            if(key.indexOf('all') == '-1' && this.isindex == 1) {
              subtotal1.push({
                name:key,
                type:'line',
                data:res.data[key],
                // color:'#000'
                color:colorList1[index]
              })
              index++,
              // console.log(this.option.series,'this.option.seriesthis.option.seriesthis.option.series')
              // this.getChart1()
              this.selectList1.forEach((item) => {
                item.child.forEach((item1) => {
                  if(item1.label == data.productNames[0]) {
                    this.$nextTick(function(){
                      this.getChart1(subtotal1,item.label)
                    })
                  }
                })
              })
            }
            //累计
            if(key.indexOf('all') != '-1' && this.isindex == 2) {
              let newKey = key.slice(0,key.length-5)
              total1.push({
                name:newKey,
                type:'line',
                // stack:'111',
                data:res.data[key],
                color:colorList1[index]
              })
              index++
              this.selectList1.forEach((item) => {
                item.child.forEach((item1) => {
                  if(item1.label == data.productNames[0]) {
                    this.$nextTick(function(){
                      this.getChart1(total1,item.label)
                    })
                  }
                })
              })
            }
          }
        }
      })
      this.valuebbb = true
    },
    // 点击第一个搜索
    getSalesV() {
      this.valueaaa = false
      let productNamesArr = []
      this.productNames = []
      let echartsData = []
      this.value2.forEach((item) => {
        productNamesArr.push(this.value1[item].label)
      })
      let data = {
        year:this.queryParams.year, //年
        months:this.queryParams.months, //月
        timeParams:{beginTime:this.dateRange[0],endTime:this.dateRange[1]}, //创建时间
        productNames:productNamesArr  //选择单位
      }
      getSalesHistogram(data).then((res) => {
        this.echartsData = res.data
        if(res.code === 200) {
          this.selectList.forEach((item) => {
            item.child.forEach((item1) => {
              if(item1.label == data.productNames[0]) {
                this.initCharts(data.productNames,res.data,item.label)
              }
            })
          })
        }
      });
      if(echartsData.length <= 0) {
        this.initCharts(data.productNames)
      }
      this.valueaaa = true
    },
    change(e) {

      // console.log(val, "val");
      // console.log(option, "option");
    },
    // 第一个重置
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        year: undefined,
        months: undefined,
      };
      this.value1 = [];
      this.value2 = []
      this.valueaaa = false
      this.initCharts()
      this.valueaaa = true


    },

    // 处理年份数据
    getYears() {
      const timeOne = new Date();
      const year = timeOne.getFullYear();

      this.yearList = [
        { id: year - 2, name: year - 2 + " 年" },
        { id: year - 1, name: year - 1 + " 年" },
        { id: year, name: year + " 年" },
        { id: year + 1, name: year + 1 + " 年" },
        { id: year + 2, name: year + 2 + " 年" },
      ];
    },
    //第一个树状图
    initCharts(xName,xData,unit) {
      // getChartData(this.addDateRange(this.queryParams, this.dateRange)).then(
      //   (response) => {
          // var datas = [3,4,5,6,9,7];
          var datas = xData
          // var datas = a
      //     // console.log(response,'getChartDatagetChartData')

          // if (response.data != null) {
          //   datas = response.data.signPrice;
          // }
      //     // 数据图赋值
          const myChart = echarts.init(document.getElementById("chart"));
          myChart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              formatter: (params) => {
                return params[0].name + ": " + params[0].data + "" + unit + "<br>";
              },
              textStyle: {
                align: "left",
              },
            },

            xAxis: {
              type: "category",
              // data: [
              //   "i砼(台套)",
              //   "城市更新(吨)",
              //   "uhpc(吨)",
              //   "轻质墙材(平米)",
              //   "风电(吨)",
              //   "化学建材所(吨)",
              //   "重点项目组(吨)",
              // ],
              data:xName,
              axisLabel: {
                internal: 0,
                rotate: -20,
                // rotate: 0,
              }
            },
            yAxis: {
              type: "value",
              name:  unit == undefined ? '' : "单位/" + unit,
            },
            series: [
              {
                data: datas,
                barWidth: 50,
                type: "bar",
                itemStyle: {
                  normal: {
                    color: function (params) {
                      var colorList = [
                        "#00A3E0",
                        "#FFA100",
                        "#ffc0cb",
                        "#CCCCCC",
                        "#BBFFAA",
                        "#749f83",
                        "#ca8622",
                        "green",
                        '#ffff00',
                        '#f5deb3',
                        '#ffc0cb',
                        '#9932cd',
                        '#ffa631',
                        '#ff6c37',
                        '#15be74',
                      ];
                      
                      return colorList[params.dataIndex];
                    },
                  },
                },
              },
            ],
          });
      //   }
      // );
    },
    //第二个折线图
    getChart1(xData,unit) {
      const myCharta = echarts.init(document.getElementById("chart1"));
      myCharta.clear()
      myCharta.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          name:  unit == undefined ? '' : "单位/" + unit,
        },
        series: xData,

      });
    },

    compute() {
      // this.initCharts();
      this.getSalesV()
    },
  },
  mounted() {
    // 默认为当年
    this.queryParams.year = new Date().getFullYear();
    // this.initCharts();
    // this.getSalesV();
    // this.getChart1()
    this.value1 = this.selectList[1].child
    this.value2 = [this.selectList[1].child[1].value,this.selectList[1].child[2].value,this.selectList[1].child[3].value]
    this.getSalesV()
    this.value3 = this.selectList1[1].child
    this.value4 = [this.selectList1[1].child[1].value,this.selectList1[1].child[2].value,this.selectList1[1].child[3].value]
    this.search()
  },
};
</script>

<style scoped>
.active {
  background-color: #1890ff;
  color: #fff;
}
.h2 {
  text-align: center;
  margin: 50px;
}
.top {
  display: flex;
}
.box {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.box1 {
  padding-right: 12px;
  color: #606266;
  font-weight: bold;
  font-size: 14px;
}
.box11 {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #e5e7ec;
  border-radius: 15px 0 0 15px;
  border-right: 0;
  margin-left: 300px;
}
.box22 {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #e5e7ec;
  border-radius: 0 15px 15px 0;
  border-left: none;
}
</style>
